@import "~style";

.@{prefix}-togglecase {
  padding: 10px;
  &-item {
    & + & {
      margin-top: 20px;
    }
    &-label {
      margin-right: 5px;
      display: inline-block;
      min-width: 100px;
      text-align: right;
    }
    &-value {
      .@{prefix}-radio {
        border: none !important;
        padding: 0 !important;
        &:hover {
          border: none !important;
          color: @font-color !important;
        }
      }
      & > span {
        cursor: pointer;
        padding: 5px;
        border-radius: 3px;
        border: solid 1px @primary-border-color;
        transition: border-color 0.3s;
        &:hover {
          color: @primary-color;
          border: 1px solid @primary-color !important;
        }
      }
      & > span:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      & > span:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
      & > span + span {
        border-left: 1px solid transparent;
      }
      &-checked {
        color: @primary-color;
        border: 1px solid @primary-color !important;
      }
    }
  }
}
